<template>
  <div class="homelist">
    <van-nav-bar
      title="发布房源"
      left-text="返回"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <van-form @submit="onSubmit">
      <van-cell title="房源信息" class="title_color" />
      <van-field
        readonly
        clickable
        name="community"
        :value="community.communityName"
        label="小区名称"
        placeholder="请输入小区名称"
        :is-link="true"
        input-align="right"
        @click="$router.push('/searchcity')"
        :rules="[{ required: true, message: '请选择小区' }]"
      />
      <!-- 租金 -->
      <van-field
        v-model="price"
        label="租金"
        name="price"
        placeholder="请输入租金/月"
        :rules="[{ required: true, message: '请输入租金' }]"
      >
        <template #extra>￥/月</template>
      </van-field>
      <!-- 建筑面积 -->
      <van-field
        v-model="size"
        label="建筑面积"
        name="size"
        placeholder="请输入建筑面积"
        :rules="[{ required: true, message: '请填输入建筑面积' }]"
      >
        <template #extra>m²</template>
      </van-field>
      <!-- 所在楼层 -->
      <van-field
        name="floor"
        label="所在楼层"
        :value="floor.label"
        placeholder="请选择"
        :is-link="true"
        input-align="right"
        @click="showPicker = true"
        :rules="[{ required: true, message: '请选择所在楼层' }]"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="floorlist"
          @confirm="onfloorConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <!-- 户型 -->
      <van-field
        :value="roomType.label"
        name="roomType"
        label="户型"
        placeholder="请选择"
        :is-link="true"
        input-align="right"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择户型' }]"
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="roomTypelist"
          @confirm="onroomTypeConfirm"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <!-- 朝向 -->
      <van-field
        readonly
        clickable
        name="oriented"
        :value="oriented.label"
        label="朝向"
        placeholder="请选择"
        :is-link="true"
        input-align="right"
        @click="showPicker2 = true"
        :rules="[{ required: true, message: '请选择朝向' }]"
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="orientenlist"
          @confirm="onorientedConfirm"
          @cancel="showPicker2 = false"
        />
      </van-popup>
      <!-- 房屋标题 -->
      <van-cell-group>
        <van-cell title="房屋标题" />
        <van-field
          v-model="title"
          name="title"
          placeholder="请输入标题（列如：整租 小区名 2室 500元）"
          :rules="[{ required: true, message: '请填写房屋标题' }]"
        />
      </van-cell-group>
      <!-- 房屋图像 -->
      <van-cell-group>
        <van-cell title="房屋图像" />
        <van-field name="houseImg" label="" >
          <template #input>
            <van-uploader
              :after-read="clzpAfterRead"
              :before-read="beforeRead"
              v-model="houseImg"
            />
          </template>
        </van-field>
      </van-cell-group>
      <!-- 房屋配置 -->
      <van-cell-group>
        <van-cell title="房屋配置" />
        <ul class="checklist" name="supporting">
          <li
            @click="changecek(item)"
            :class='{ active: item.checked }'
            v-for="(item, index) in checklist"
            :key="index"
          >
            <i :class="ficon + (index + 1)"></i>
            <p>{{ item.label }}</p>
          </li>
        </ul>
      </van-cell-group>
      <!-- 房屋描述 -->
      <van-cell-group class="textarea_list">
        <van-cell title="房屋描述" />
        <van-field
          v-model="description"
          type="textarea"
          name="description"
          placeholder="请输入房屋描述信息"
          :rules="[{ required: true, message: '请输入房屋信息' }]"
        />
      </van-cell-group>
      <!-- 底部按钮 -->
      <div class="btnbottom">
        <van-button type="default">取消</van-button>
        <van-button type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getHoursLiter, getImage, postHours } from '@/api/home'
export default {
  name: 'GoZuHome',
  data () {
    return {
      title: '', // 房屋标题
      description: '', // 房屋描述
      roomType: '', // 户型
      oriented: '', // 朝向
      floor: '', // 所在楼层
      houseImg: [], // 房屋图像
      price: '', // 价格
      community: {}, // 小区信息
      size: '', // 面积
      supporting: [], // 房屋配置
      checklist: [], // 房屋配置数据
      ficon: 'iconfont icon-haokez', // 字体图标
      floorColumns: [], // 所在楼层数据
      roomTypeColumns: [], // 户型数据
      orientedColumns: [], // 朝向数据
      imgurl: '', // 图片格式
      showPicker: false,
      showPicker1: false,
      showPicker2: false
    }
  },
  async created () {
    // 小区信息
    this.community = this.$route.query
    // 发布房屋所需数据
    const { body } = await getHoursLiter()
    body.supporting.forEach(item => (item.checked = false))
    this.checklist.push(...body.supporting)
    ;[...body.roomType].forEach(item => this.roomTypeColumns.push(item))
    ;[...body.oriented].forEach(item => this.orientedColumns.push(item))
    ;[...body.floor].forEach(item => this.floorColumns.push(item))
  },
  computed: {
    // 楼层
    floorlist () {
      return this.floorColumns.map(item => item.label)
    },
    // 户型
    roomTypelist () {
      return this.roomTypeColumns.map(item => item.label)
    },
    // 朝向
    orientenlist () {
      return this.orientedColumns.map(item => item.label)
    }
  },
  methods: {
    changecek (val, index) {
      val.checked = !val.checked
      if (!this.supporting.includes(val.label)) {
        this.supporting.push(val.label)
      } else {
        this.supporting = this.supporting.filter(item => item !== val.label)
      }
    },
    // 提交
    async onSubmit (values) {
      const data = {
        title: this.title,
        description: this.description,
        roomType: this.roomType.value,
        oriented: this.oriented.value,
        supporting: this.supporting.join('|'),
        price: this.price,
        floor: this.floor.value,
        community: this.community.community,
        houseImg: this.imgurl,
        size: this.size
      }
      await postHours(data)
      this.$toast.success('发布成功')
      this.$router.push('/lookingroom')
    },
    // 朝向值
    onorientedConfirm (value, index) {
      // 将当前对应索引的数据显示
      this.oriented = this.orientedColumns[index]
      this.showPicker2 = false
    },
    // 户型值
    onroomTypeConfirm (value, index) {
      this.roomType = this.roomTypeColumns[index]
      this.showPicker1 = false
    },
    // 楼层值
    onfloorConfirm (value, index) {
      this.floor = this.floorColumns[index]
      this.showPicker = false
    },
    // 上床图片
    async clzpAfterRead (file) {
      console.log(file)
      // 上传状态提示开启
      file.status = 'uploading'
      file.message = '上传中...'
      // 创建一个空对象实例
      const formData = new FormData()
      formData.append('file', file.file)
      const { body } = await getImage(formData)
      // 关闭提示
      file.status = 'done'
      // 上传成功提示
      this.$toast.success('上传成功')
      this.imgurl = body.join()
    },
    // 判断文件格式
    beforeRead (file) {
      if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
        this.$toast('请上传正确格式的图片')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less" scoped>
  .active {
    color: #21b97a;
  }
  .homelist {
    background-color: #f6f5f6;
    .van-form {
      margin-top: 46px;
      .textarea_list {
        margin: 20px 0;
      }
      .btnbottom {
        button {
          width: 50%;
        }
      }
      .title_color {
        color: #21b97a;
        font-size: 16px;
      }
      // 房屋配置
      .checklist {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 20%;
          text-align: center;
          padding: 12px 0;
          font-size: 14px;
          .iconfont {
            font-size: 20px;
          }
        }
      }
    }
  }
</style>
